<template>
  <div class="container">
    <div class="left-section">
      <p>初始的msg: {{ msg }}</p>
      <p>反转后的值: {{ reversedMsg }}</p>
      <!-- 点击时直接修改 msg 的值，computed 会自动重新计算 reversedMsg -->
      <button @click="msg = 'Hello Vue'" class="btn">更改</button>
    </div>

    <div class="right-section">
      <p>初始message: {{ message }}</p>
      <p>反转之后的值: {{ reversedMessage }}</p>
      <!-- 点击时直接修改 message 的值，computed 会自动重新计算 reversedMessage -->
      <button @click="message = 'new hello'" class="btn">更改</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 定义原始响应式数据
let msg = ref("Hello World");
let message = ref("hello");

// 用 computed 定义“反转后的值”（自动依赖原始数据变化）
const reversedMsg = computed(() => {
  return msg.value.split("").reverse().join("");
});

const reversedMessage = computed(() => {
  return message.value.split("").reverse().join("");
});
</script>